<template>
    <div class="flex items-center text-[13px]" @click.stop="open">
      <span class="mr-[10px]">{{ gameText }}</span>
    </div>
    <div>
        <van-popup round v-model:show="show" position="bottom" :style="{ height: '80%', overflow: 'hidden' }" :close-on-click-overlay="true">
        <div class="popup-box">
          <ul class="game-list">
            <li
              class="item"
              v-for="item in gameOptions"
              :key="item.value"
              @click="handleGameSelect(item)"
              :class="{ 'selected': item.selected }"
            >
              <span>{{ item.text }}</span>
              <i v-if="item.selected" class="check-icon">✔</i>
            </li>
          </ul>
          <div class="popup-footer">
            <van-button type="default" @click="cancelSelection">取消</van-button>
            <van-button type="primary" @click="confirmSelection">确认</van-button>
          </div>
        </div>
      </van-popup>
    </div>
  </template>
  
  <script setup lang="ts">
  import { useGameStore } from "@/store/modules/game";
  import { storeToRefs } from "pinia";
  import { ref, reactive } from "vue";
  
  const show = ref(false);
  const gameStore = useGameStore();
  const { gameTotal } = storeToRefs(gameStore);
  
  const gameText = ref("选择游戏");
  
  const gameOptions = reactive(
    [{ text: "全部游戏", value: -1, selected: false }].concat(
      gameTotal.value.map((v) => ({
        text: v.Name,
        value: v.LotteryId,
        selected: false,
      }))
    )
  );
  
  const selectedGames = ref<{ value: number; text: string }[]>([]);
  
  const emit = defineEmits(["update"]);
  
  // 处理游戏选中状态
  const handleGameSelect = (item: any) => {
    if (item.value === -1) {
      const selectAll = !item.selected;
      gameOptions.forEach((game) => (game.selected = selectAll));
      selectedGames.value = selectAll
        ? gameOptions.filter((game) => game.value !== -1).map((game) => ({
            value: game.value,
            text: game.text,
          }))
        : [];
    } else {
      item.selected = !item.selected;
      if (item.selected) {
        selectedGames.value.push({ value: item.value, text: item.text });
      } else {
        selectedGames.value = selectedGames.value.filter(
          (game) => game.value !== item.value
        );
      }
    }
  };
  
  // 更新gameText显示
  const updateGameText = () => {
    if (selectedGames.value.length === 0) {
      gameText.value = "选择游戏";
    } else {
      gameText.value = selectedGames.value.map((game) => game.text).join(", ");
    }
  };
  
  // 取消选择
  const cancelSelection = () => {
    selectedGames.value = [];
    gameOptions.forEach((item) => (item.selected = false));
    show.value = false;
  };
  
  // 确认选择
  const confirmSelection = () => {
    updateGameText();
    show.value = false;
    emit("update", selectedGames.value);
  };
  
  const open = () => {
    show.value = true;
  };
  
  defineExpose({
    open,
  });
  </script>
  

  <style scoped>
  .popup-box {
    @apply py-[5px];
    overflow: hidden;
    height: 100%;
  }
  
  .game-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: calc(100% - 80px);
    overflow-y: auto;
  }
  
  .popup-box .item {
    @apply h-[50px] text-[14px] text-center leading-[50px] border-solid border-b-[1px] border-[#E4E4E4];
    cursor: pointer;
    padding: 0 10px;
  }
  
  .popup-box .item.selected {
    background-color: #f0f0f0;
  }
  
  .check-icon {
    font-size: 16px;
    color: green;
  }
  
  .popup-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    position: sticky;
    bottom: 0;
    background-color: #fff;
    z-index: 10;
  }
  
  .popup-footer .van-button {
    flex: 1;
    margin: 0 5px;
  }
  </style>
  